<template>
  <div class="color-range">
    <div v-for="(val, i) in colorRangeVal"
      class="range-item"
      :key="i">
      <span class="icon gap"
        :style="{'backgroundColor': val.color}"></span>
      <span class="gap">{{val.min}}</span>
      <span class="gap"
        v-if="val.max">~</span>
      <span class="gap"
        v-if="val.max">{{val.max}}</span>
      <span>万亩</span>
      <span v-if="!val.max">以上</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      colorRangeVal: {
        type: Array,
        default: () => []
      }
    }
  };
</script>

<style lang="scss" scoped>
  .color-range {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: $--zindex-map-float-box;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    .range-item {
      display: flex;
    }
    .icon {
      width: 14px;
      height: 14px;
    }
    .gap {
      margin-right: 5px;
    }
  }
</style>